// ES6常用功能
// 解构赋值

// ES5 赋值
(function () {
    var obj = {
        a: 1,
        b: 2,
        c: 3
    };
    // var a=obj.a;
    // var c=obj.c;
    // console.log(a,c);

    var arr = [4, 5, 6];
    // var a1=arr[0];
    // var a3=arr[2];
    // console.log(a1,a3)

    // ES6 解构赋值
    let {
        a,
        c
    } = obj //这里的a,c必须是obj里含有的变量名 否则undefined
    console.log(a); //1 

    let [x, y, z] = arr; //变量数<=元素数 且是按照顺序赋值的 否则是undefined
    console.log(x, z); //4,6

    console.log([...arr]) //4,5,6
    console.log({ ...obj
    });
})();

// 块级作用域
(function () {

    var obj = {
        a: 1,
        b: 2,
        c: 3
    };

    // ES5中 在{}外依然能访问{}内的变量 item 实际上在挂在{}之外定义的
    (function () {
        for (var item in obj) {
            //console.log(item);
        }
        console.log(item) //c
    })()

    //ES6 中有了块级作用域
    //实际上在{}内部使用let 声明变量时
    //将_item=item 重新将item赋给了_item  然后item=null 在内部使用_item
    //所以在外访问item 实际上已经没有这个东西存在了
    for (let item in obj) {
        //console.log(item)
    }
    // console.log(item) //item is not defined 
})();

// 函数默认值
(function () {
    //ES5中使用默认值
    function fun(a, b) {
        let b1 = b || 100;
        console.log(a, b1);
    }
    console.log("ES5:");
    fun(200); //200 100
    fun(200, 200); //200,200

    // ES6中使用默认值
    function fun1(a, b = 100) {
        console.log(a, b);
    }
    console.log("ES6:");
    fun1(200);
    fun1(200, 200)
})();

// 箭头函数
(function () {
    function fn(){
        console.log("最近的this："); //{a: 100}
        console.log(this);
        var a=[1,2,3];
        var that=this;
          // ES5 使用函数 this执行有问题
        a.map(function(item){
            console.log("ES5 this指向：");
            console.log(this)  //window;
            // 因为每个函数执行时都会产生this,arguments两个特殊的变量
            // this基于执行环境而产生的 谁调用到就指向谁
            // 可以将外部的this保存起来，供内部使用保证正确的this指向
            console.log(that) //{a: 100}
        })

        // 使用ES6 箭头函数 可以绑定this到最近的作用域 
        // 这就避免了this执行对内部函数的误导
        a.map(item=>{
            console.log("ES6 this指向：");
            console.log(this); //{a: 100}
        })
    }
    fn.call({a:100}) //将fn()作用域绑定到对象{a:100}上
    // fn.call(Object) //将fn()作用域绑定到对象Object上
})();